<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         :root {
            --red: 50;
            --green: 80;
            --blue: 70;
            /* --lightness: (var(--red) * 0.2126 + var(--green) * 0.7152 + var(--blue) * 0.0722) / 255; */
            --threshold: 0.5;
        }
        
        .box {
            width: 500px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
        }
        
        .main {
            width: 50%;
            height: 50%;
            /* background-color: slateblue; */
            background: rgb(var(--red), var(--green), var(--blue));
            margin: 0 auto;
            margin-bottom: 60px;
        }
        
        .main>p {
            text-align: center;
            line-height: 150px;
            /* background: rgb(red, green, blue); */
            --r: calc(var(--red) * 0.2126);
            --g: calc(var(--green) * 0.7152);
            --b: calc(var(--blue) * 0.0722);
            --sum: calc(var(--r) + var(--g) + var(--b));
            --lightness: calc(var(--sum) / 255);
            color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="main">
            <p>RGB(50,80,70)</p>
        </div>
        <div class="control">
            <p>拖动滑块，改变RGB变量：</p>
            <p>R：<input type="range" min="0" max="255" value="50" name="red" id="r"></p>
            <p>G：<input type="range" min="0" max="255" value="80" name="green" id="g"></p>
            <p>B：<input type="range" min="0" max="255" value="70" name="blue" id="b"></p>
        </div>
    </div>
    <script>
        // let main = document.querySelector('.main');
        // let p = document.querySelector('.main').querySelector('p');
        // let control = document.querySelector('.control');
        // control.addEventListener('input', function() {
        //     let r = document.querySelector('#r');
        //     let g = document.querySelector('#g');
        //     let b = document.querySelector('#b');
        //     // console.log(r.value);
        //     let rval = r.value;
        //     let gval = g.value;
        //     let bval = b.value;
        //     main.style.background = 'rgb(' + rval + ' +' + gval + ' +' + bval + ')';
        //     // 'url(' + this.src + ')';
        //     p.innerHTML = 'rgb(' + rval + ',' + gval + ',' + bval + ')';
        // })
        var eleRanges = document.querySelectorAll('input[type="range"]');
        Array.from(eleRanges).forEach(function(range) {
            range.addEventListener('input', function() {
                document.documentElement.style.setProperty('--' + this.name, this.value);
            });
        });
        // let main = document.querySelector('.main');
        // let p = document.querySelector('.main').querySelector('p');
        // let control = document.querySelector('.control');
    </script>
</body>

</html>